<template>
  <div class="index">
    <div @click="tomyhome">《返回列表</div>
    <div class="center">
      <div class="center-left">
        <el-form ref="form" :model="form" label-width="120px">
          <el-form-item label="兑换码类型:">
            <el-select v-model="form.region" placeholder="请选择活动区域">
              <el-option :label="v.name" :value="v.id" v-for="v in quyuList" :key="v.id"></el-option>
            </el-select>

            <el-select v-model="form.region1" placeholder="请选择活动区域">
              <el-option label="一小时卡" value="一小时卡"></el-option>
          <el-option label="三小时卡" value="三小时卡"></el-option>
          <el-option label="周卡" value="周卡"></el-option>
          <el-option label="月卡" value="月卡"></el-option>
          <el-option label="季卡" value="季卡"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="生成兑换码数量">
            <el-input v-model="form.num"></el-input>
          </el-form-item>

          <el-form-item label="兑换码有效期">
            <el-col :span="11">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="form.date1"
                style="width: 120px"
              >
              </el-date-picker>
            </el-col>
            <el-col class="line" :span="1">到</el-col>
            <el-col :span="11">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="form.date2"
                style="width: 120px"
              >
              </el-date-picker>
            </el-col>
          </el-form-item>
          <el-form-item label="兑换码平台">
            <el-input v-model="form.dhmpt"></el-input>
          </el-form-item>
        </el-form>
        <div class="adddhm" @click="adddhm">生成兑换码</div>
        <div class="cleardhm" @click="cleardhm">清空条件，重新生成</div>
        <div class="lookdh" v-if="kel">
          <h4>兑换码生成成功</h4>
          <div>兑换码编号：005</div>
          <div>兑换码生成时间：2015-12-15 06:45:45</div>
          <div>兑换码类型：{{ form.region }} {{ form.region1 }}</div>
          <div>兑换码数量：{{ form.num }}</div>
          <div>兑换码有效期：{{ form.date1 }} 到 {{ form.date2 }}</div>
          <div>兑换码使用平台：{{ form.dhmpt }}</div>
          <div class="last">详细信息在右侧列表中</div>
        </div>
      </div>
      <div class="center-right">
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          @header-click="daochu"
        >
          <el-table-column prop="name" label="类型"> </el-table-column>
          <el-table-column prop="code" label="兑换码"> </el-table-column>
          <el-table-column
            prop="endTime"
            label="有效期"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column prop="platform" label="平台" show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="daoc"
            label="导出到excel"
            show-overflow-tooltip
          >
          </el-table-column>
        </el-table>
        <el-pagination
          style="float: right"
          @current-change="handleCurrentChange"
          :current-page.sync="page"
          :page-size="limit"
          layout="prev, pager, next"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { downloadXlsx } from "@/utils/xlsx.js";
export default {
  data() {
    return {
      page: 1,
      limit: 5,
      total: 50,
      kel: false,
      form: {
        num: "0",
        region: "",
        region1: "",
        date1: "",
        date2: "",
        dhmpt: "",
      },
      quyuList:[],
      tableData: [
        {
          type: "单人明区三小时卡",
          duhuanma: "美团外卖XDDFEEDEFA",
          youxiaoqi: "2022-05-06到2022-05-09",
          pint: "美团外卖",
        },
        {
          type: "单人明区三小时卡",
          duhuanma: "美团外卖XDDFEEDEFA",
          youxiaoqi: "2022-05-06到2022-05-09",
          pint: "美团外卖",
        },
        {
          type: "单人明区三小时卡",
          duhuanma: "美团外卖XDDFEEDEFA",
          youxiaoqi: "2022-05-06到2022-05-09",
          pint: "美团外卖",
        },
        {
          type: "单人明区三小时卡",
          duhuanma: "美团外卖XDDFEEDEFA",
          youxiaoqi: "2022-05-06到2022-05-09",
          pint: "美团外卖",
        },
        {
          type: "单人明区三小时卡",
          duhuanma: "美团外卖XDDFEEDEFA",
          youxiaoqi: "2022-05-06到2022-05-09",
          pint: "美团外卖",
        },
        {
          type: "单人明区三小时卡",
          duhuanma: "美团外卖XDDFEEDEFA",
          youxiaoqi: "2022-05-06到2022-05-09",
          pint: "美团外卖",
        },
        {
          type: "单人明区三小时卡",
          duhuanma: "美团外卖XDDFEEDEFA",
          youxiaoqi: "2022-05-06到2022-05-09",
          pint: "美团外卖",
        },
      ],
    };
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //换页
    handleCurrentChange: function () {
        this.getData()
    },
    adddhm() {
      
      if (
        isNaN(this.form.num) ||
        this.form.region == "" ||
        this.form.region1 == "" ||
        this.form.date1 == "" ||
        this.form.dhmpt == ""
      ) {
        this.$notify.error({
          title: "错误",
          message: "生成兑换码数据错误,或数据为空",
        });
      } else {
        this.kel = true;
        console.log(this.zhtime(this.form.date1), this.zhtime(this.form.date2));
        this.form.date1 = this.zhtime(this.form.date1);
        this.form.date2 = this.zhtime(this.form.date2);
        console.log(this.form.region1,this.form.num,this.form.dhmpt,this.form.date1,this.form.date2,this.form.region)
        this.$axios({
            url:'/code/add',
            method:'post',
            params:{
                tName:this.form.region1,
                number:this.form.num,
                platform:this.form.dhmpt,
                startTime:this.form.date1,
                endTime:this.form.date2,
                areaId:this.form.region
            }
        }).then((res)=>{
            console.log(res);
            this.getData()
        })
      }
    },
    zhtime(e) {
      let time = new Date(e);
      return (
        time.getFullYear() + "-" + (time.getMonth() + 1) + "-" + time.getDate()
      );
    },
    //清除
    cleardhm() {
      this.form = {
        num: 0,
        region1: "",
        region2: "",
        region3: "",
        date1: "",
        date2: "",
        dhmpt: "",
        addTime2: "",
        addTime1: "",
        duihuan: "",
        platform: "",
      };
      this.kel = false;
    },
    //回到兑换码管理
    tomyhome() {
      this.$router.push("/home/dhmgl");
    },
    //导出数据
    daochu(column, event) {
      console.log(column.label, event);
      if (column.label == "导出到excel") {
        alert("导出到");
        let datalist = [];
        datalist.push([
          "类型",
          "兑换码",
          "有限期",
          "平台",
         
        ]);
        this.tableData.forEach((item) => {
          datalist.push([
            item. type,
            item.duhuanma,
            item.youxiaoqi,
            item.youxiaoqi,
           
          ]);
        });
        downloadXlsx(datalist, "Uni数据统计.xlsx");
      }
    },
     //初次渲染
    getData() {
       this.$axios({
        url:'/code/area',
        method:'get'
      }).then((res)=>{
        console.log(res);
        this.quyuList=res.data.data
      });
      this.$axios({
        url: "/code/list",
        method: "get",
        params: {
          page: this.page,
          limit: this.limit,
        }
      }).then((res) => {
        for(let i=0;i<res.data.data.list;i++){
res.data.data.list[i].name=res.data.data.list[i].area+res.data.data.list[i].name
        }
        console.log(res.data.data.list)
        this.tableData = res.data.data.list;
        this.total = res.data.data.totalCount;
        console.log(res);
      });
    },
    
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },
  },
  mounted(){
    this.getData()
  }
};
</script>

<style lang="less" scoped>
.index > div:nth-child(1) {
  height: 60px;
  line-height: 60px;
  text-align: left;
  color: blue;
}

.center {
  display: flex;
}

.center > div:nth-child(1) {
  flex: 1;
  margin-right: 10px;
}

.center > div:nth-child(2) {
  flex: 2;
}

.el-select {
  width: 90px;
}

.el-form-item__content {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
}

.el-form-item__content > div {
  margin-left: 20px;
  float: left;
}

.el-form label {
  width: 120px;
}

.el-input {
  width: 90px;
}

.el-date-picker {
  width: 100px;
}

.el-col-11 {
  width: 100px;
}

.center .adddhm {
  height: 60px;
  background-color: blue;
  color: white;
  line-height: 60px;
  text-align: center;
  border-radius: 8px;
  cursor: pointer;
}

.center-left {
  padding-top: 30px;
  padding-left: 30px;
  padding-right: 30px;
  box-sizing: border-box;
  background-color: #eee;
  min-width: 460px;
}

.cleardhm {
  height: 40px;
  line-height: 40px;
  color: blue;
}

.lookdh {
  text-align: left;
  height: auto;
  padding: 30px;
  box-sizing: border-box;
  margin-top: 10px;
  margin-bottom: 40px;
  background-color: white;

  h4 {
    height: 30px;
    line-height: 30px;
  }

  div {
    height: 30px;
    line-height: 30px;
  }

  .last {
    font-weight: 600;
  }
}

div .el-table__header-wrapper {
  height: 80px;
  line-height: 80px;
}

.el-main div {
  line-height: 40px;
}

.el-main .el-form-item {
  line-height: 40px;
}
.el-table__header .has-gutter {
  background-color: rgb(242, 242, 242);
}
.center .el-table .has-gutter {
  background-color: rgb(242, 242, 242);
}
.center-right
  .el-table
  .el-table__header-wrapper
  .el-table__header
  .has-gutter {
  background-color: black;
}
.index > div:nth-child(1) {
  cursor: pointer;
}
</style>